<template>
    <div v-loading.sync="submitLoadingController" class="formpage">
        <my-form ref="form" v-model="form" file :detail-url="`${$store.state.api.webUrl}/tbfaupload/detail.json`" :detail-extra="detailExtra"
            @cancle="cancleHandler" @submit="submitHandler" labelPosition="left" labelWidth="80px">

            <div class="my-upload">
                <Accessory ref="myupload" @setCoverguid="getCoverguid" :fileguid="form.fileguid" filetype=".doc,.docx,.pdf,xls,.xlsx" :isUp='true'></Accessory>
                <div class="info">文件需符合 <span @click="dialogUp = true">《上传规范及用户上传协议》</span> 方可上传</div>
            </div>

            <el-form-item class="table-full-row" label="文件名称" prop="docname" :rules="newRule('文件名称', 'required', 'max40')">
                <el-input style="width:100%" v-model="form.docname"></el-input>
            </el-form-item>

            <doc-attr v-model="form" @changeCode="changeCode">
                <template #sonKey></template>
            </doc-attr>

            <el-form-item label="关键字(选填)" label-width="100px" prop="keywords" class="table-full-row">
                <keyword-editor class="" v-model="form.keywords"></keyword-editor>
            </el-form-item>

            <el-form-item class="table-full-row" label="项目金额" placeholder="请输入项目金额,单位 万元">
                <el-input-number size="mini" v-model="form.amount" :min="0" :controls="false"></el-input-number> &nbsp;万元
            </el-form-item>

            <template slot="btn" slot-scope="scope">
                <el-button class="submit-btn" type="primary" @click="scope.submitHandler">提交</el-button>

                <div class="tip">
                    为了感谢您对{{CONFIG_PROJECT.title}}-投标方案库的支持，上传文档审核通过后，将奖励您两次下载投标方案的次数！
                </div>
            </template>

            <dialog-clause v-model="dialogUp" title="上传规范及用户上传协议" type="docUpload"></dialog-clause>
        </my-form>
    </div>
</template>

<script>
import CONFIG_PROJECT from '@config/project';

import FORM_PAGE_MIXIN from '@mixins/form-page';
import DIALOG_FORM_PAGE_MIXIN from '@mixins/dialog-form-page';
// import BtnFormShbj from '../../components/shbj/btn-form';
import DocAttr from './components/doc-attr';
import KeywordEditor from './components/keyword-editor';
import DialogClause from '@components/sys/dialog-clause';
import Accessory from './components/Accessory.vue';
import { mapGetters } from 'vuex';

export default {
    mixins: [FORM_PAGE_MIXIN, DIALOG_FORM_PAGE_MIXIN],
    components: {
        DocAttr,
        KeywordEditor,
        // BtnFormShbj,
        DialogClause,
        Accessory,
    },
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            CONFIG_PROJECT,

            form: {
                docname: '',
                taglist: [],
                professionlist: [],
                keywords: '',
                doctypecode: 'tou_biao_fang_an',
                doctypename: '投标方案',
                shbj: '0',
                fileguid: '',
                amount: 0,
            },

            submitLoadingController: false,
            dialogUp: false,
        };
    },
    computed: {
        detailExtra() {
            return {
                guid: this.data.guid,
            };
        },
    },
    methods: {
        //单个表单校验
        changeCode(code){
            if(!this.$refs.form){return}
            this.$refs.form.$refs['form'].validateField(code)
        },
        cancleHandler() {
            this.$emit('cancle');
        },

        // 上传成功，清除原有cover信息
        coverReset() {
            this.form.coverfileguid = '';
        },
        // 索引在1s内不可见
        delayClose() {
            setTimeout(() => {
                this.submitLoadingController = false;

                this.cancleHandler();
            }, 1000);
        },
        submitHandler() {
            if (!this.$refs.myupload.exist) {
                showMsgBox('请上传文件');
                return;
            }

            this.submitLoadingController = true;

            //增加修改二合一
            let data = this.form;
            data.shbj = '4';
            data.doctypecode = 'tou_biao_fang_an';
            data.doctypename = '投标方案';

            this.$post(
                `${this.$store.state.api.webUrl}/tbfaupload/publish.json`,
                data,
                (data) => {
                    this.delayClose();
                    this.$emit('cancle');
                    showMsg('添加成功', 'success');
                    this.$emit('addSuccess');
                },
                true
            );
        },

        getCoverguid() {
            this.form.coverfileguid = null;
        },

        keyWordValdate(rule, value, callback) {
            if (!value) {
                return callback();
            }

            this.$get(
                `${this.getGetters('mngUrl')}/documentmanage/iskeywordrepeat.json`,
                {
                    keywords: value,
                },
                (data) => {
                    if (data) {
                        return callback(new Error('存在与“行业份分类标签”或“文件类型”重复的关键字'));
                    }

                    return callback();
                }
            );
        },
    },
    mounted() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.formpage {
    // margin: auto;
    // padding: 20px;
    margin-top: -20px;
    max-width: 500px;
    // border: 1px solid pink;
}
.table-full-row {
    ::v-deep .el-select {
        width: 100%;
    }
    ::v-deep .el-form-item__error {
        z-index: 99 !important;
    }
}

.askfor {
    font-size: 12px;
    line-height: 20px;
}
.short-input {
    ::v-deep .el-input {
        width: 80px;
        text-align: center;
    }
}
.my-upload {
    margin: 10px 0;
    .info {
        padding-left: 4px;
        span {
            color: $primaryColor;
            cursor: pointer;
        }
    }
}

.my-radio {
    ::v-deep .el-radio__label {
        font-size: 14px;
        padding-left: 4px;
        color: #606266;
    }
}

.submit-btn {
    font-size: 14px;
    padding: 8px 26px;
}

.tip {
    font-size: 12px;
    color: $dangerColor;
    line-height: 1.5em;
    text-align: left;
    margin-top: 1em;
}

.el-input-number{
    width: 84px;
}
</style>